import React from 'react'
import bsStyle from './style.module.scss' // 模块化，防止样式冲突
import BetterScroll from 'better-scroll'
// console.log('bs')
// vue   数据驱动视图
// react 数据驱动视图
// state: {}  循环 事件
// dom操作

export default class MyBs extends React.Component {
  constructor(props) {
    super(props)
    // 1. 创建一个ref
    this.bsRef = React.createRef()
    this.tipRef = React.createRef()
  }
  bs = null
  // 挂载结束
  componentDidMount() {
    console.log('componentDidMount:')
    // const node = this.bsRef.current
    this.bs = new BetterScroll(this.bsRef.current, {})
    console.log(this.bs, 'bs')
    // refs 可以访问元素/访问组件
  }

  handleScroll = (e) => {
    console.log(e)
    console.log(this.bsRef.current.scrollTop)
    if (this.bsRef.current.scrollTop > 308) {
      this.tipRef.current.classList.add('fixed')
    } else {
      this.tipRef.current.classList.remove('fixed')
    }
  }

  render() {
    return (
      <div className={bsStyle['mybs-container']}>
        <div ref={this.bsRef} className={bsStyle['mybs-main']} onScroll={this.handleScroll}>
          <div className={bsStyle['mybs-main-content']}>
            <section className={bsStyle['content-item']}></section>
            <div className="tip" ref={this.tipRef} style={{ height: '.8rem', backgroundColor: 'red' }}></div>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
            <section className={bsStyle['content-item']}></section>
          </div>
        </div>
        <div className={bsStyle['mybs-footer']}></div>
      </div>
    )
  }

  // 考虑组件性能
  componentWillUnmount() {
    // 如何释放
    this.bs = null
  }
}
